<!--忘记密码-->
<template>
  <div class="login">
    <div class="register-frame" v-if="!updateOk">
      <div class="title-frame">
        <p class="title">Forgot Your Password ?</p>
        <p class="fogert">
          Enter Your Email Address And <br />We'll Send You A Link To Reset Your
          Password
        </p>
      </div>
      <div class="input-frame">
        <div class="input-panel">
          <p class="input-label">Email:<span class="must">*</span></p>
          <input v-model="form.email" @input="emailInput" class="input-in" />
        </div>
        <div class="input-panel">
          <p class="input-label">
            Verification code:<span class="must">*</span>
          </p>
          <div class="code-input">
            <input
              class="input-in"
              placeholder="Please Check The Code In The Emaill"
              v-model="form.code"
            />
            <div class="code-frame">
              <div class="code-panel" @click="inputCheck('send')">
                <span style="margin-top: 1px" v-if="!sendCode.loading">{{
                  sendCode.sendMailTip
                }}</span>
                <van-loading v-else size="1rem" color="#1989fa" />
              </div>
              <div class="model-frame" v-if="sendCode.disabled"></div>
            </div>
          </div>
        </div>
        <div class="input-panel">
          <p class="input-label">Password:<span class="must">*</span></p>
          <div class="input-fast">
            <input
              v-model="form.password"
              @input="passwordChange"
              class="input-in"
              type="password"
            />
            <van-icon
              v-if="form.password"
              :name="check.password ? 'passed' : 'close'"
              :color="check.password ? '#07c160' : '#ee0a24'"
            />
          </div>
        </div>
        <div class="input-panel">
          <p class="input-label">
            Enter the password again:<span class="must">*</span>
          </p>
          <div class="input-fast">
            <input
              v-model="form.password_confirmation"
              @input="passwordConChange"
              class="input-in"
              type="password"
            />
            <van-icon
              v-if="form.password_confirmation"
              :name="check.password_confirmation ? 'passed' : 'close'"
              :color="check.password_confirmation ? '#07c160' : '#ee0a24'"
            />
          </div>
        </div>
      </div>
      <div class="btn-frame" @click="inputCheck('register')">
        <span>SAVE</span>
      </div>
      <div class="tips-frame">
        <span @click="clickSignin" class="href">Back to login</span>
        <p style="margin-top: 0.2rem">
          The password must contain 8-20 English letters and numbers
        </p>
      </div>
    </div>
    <div class="success-frame" v-if="updateOk">
      <van-icon name="passed" color="green" />
      <div class="tips-frame">
        <p>Modified successfully&nbsp;</p>
        <p class="login-label ac-bg" @click="clickSignin">Sign in now</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        email: "",
        password: "",
        password_confirmation: "",
        code: "",
      },
      check: {
        email: false,
        password: false,
        password_confirmation: "",
      },
      sendCode: {
        sendMailTip: "Click To Get The Verification Code",
        disabled: false,
        loading: false,
      },
      updateOk: false, //修改成功
    };
  },
  mounted() {},
  methods: {
    //邮箱校验
    emailInput(val) {
      let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      let bool = reg.test(this.form.email);
      this.check.email = bool;
    },
    //发送验证码
    clickCode() {
      this.sendCode.disabled = true;
      this.sendCode.loading = true;
      this.$store
        .dispatch("user/sendEmail", {
          type: "2",
          email: this.form.email,
        })
        .then((res) => {
          if (res.code == 0) {
            this.$toast("Sent successfully");
            let send = 60;
            this.sendCode.sendMailTip = "Get The Verification Code again(60s)";
            this.sendCode.loading = false;
            let timer = setInterval(() => {
              send--;
              this.sendCode.sendMailTip =
                "Get The Verification Code again(" + send + "s)";
              if (send == 0) {
                this.sendCode.disabled = false;
                this.sendCode.sendMailTip =
                  "Click To Get The Verification Code";
                clearInterval(timer);
              }
            }, 1000);
          } else {
            this.$toast.fail(res.msg);
          }
        })
        .catch((err) => {
          this.sendCode.disabled = false;
          this.sendCode.loading = false;
        });
    },
    //跳转登陆
    clickSignin() {
      this.updateOk = false;
      this.$router.back();
    },
    //校验表单
    inputCheck(mode) {
      if (this.form.email == "") {
        this.$toast("Please fill in the Email");
      } else if (!this.check.email) {
        this.$toast("Please fill in the correct Email");
      } else {
        if (mode == "send") {
          this.clickCode();
        } else {
          if (this.form.password == "") {
            this.$toast("Please fill in the Password");
          } else if (this.form.code == "") {
            this.$toast("Please fill in the email verification code");
          } else if (
            this.check.password == false ||
            this.check.password_confirmation == false
          ) {
            this.$toast("Please check the Password");
          } else {
            this.nowRegister();
          }
        }
      }
    },
    //确认修改
    nowRegister() {
      this.tips.startLoadingToast();
      this.$store
        .dispatch("user/retpwd", this.form)
        .then((res) => {
          //console.log(res);
          this.tips.closeToast();
          const { code, msg } = res;
          if (code === 0) {
            this.updateOk = true;
          } else {
            this.$toast.fail(msg);
          }
        })
        .catch((error) => {
          const { data, statusText } = error.response;
          if (data.msg) {
            this.$toast.fail(data.msg);
          } else {
            this.$toast.fail(statusText);
          }
        });
    },
    //输入密码
    passwordChange(val) {
      //let erg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      let erg =  /(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_-]+$).{8,20}/;
      let bool = erg.test(this.form.password);
      this.check.password = bool;
      if (bool) {
        if (this.form.password_confirmation == this.form.password) {
          this.check.password_confirmation = true;
        } else {
          this.check.password_confirmation = false;
        }
      } else {
        this.check.password_confirmation = false;
      }
    },
    //再次输入密码
    passwordConChange(val) {
      //let erg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
      let erg =  /(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_-]+$).{8,20}/;
      let bool = erg.test(this.form.password_confirmation);
      if (bool) {
        if (this.form.password_confirmation == this.form.password) {
          this.check.password_confirmation = true;
        } else {
          this.check.password_confirmation = false;
        }
      } else {
        this.check.password_confirmation = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "login.less";
</style>